<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style2.css" rel="stylesheet" type="text/css" />
<link href="css/chitietsanpham.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.rating.css" rel="stylesheet" type="text/css" />
<link href="css/tabs.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="script/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="script/jquery.MetaData.js" type="text/javascript"></script>
<script language="JavaScript" src="script/jquery.rating.js" type="text/javascript"></script>
<script language="JavaScript" src="script/jquery.rating.pack.js" type="text/javascript"></script>
<script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
    $('#tab-menu:first').css('padding-left', '0').append('<li><a href=#>Tab More</a></li>'); //On the fly :)
    var nav_height = $('#nav').css('height');
    //alert('nav_height: '+nav_height);
    var content_height = $('#content').css('height');
    //alert('content_height: '+content_height);
    var common_height =  nav_height > content_height? nav_height : content_height;
    //alert(common_height);
    $('#nav').css('height', common_height);
    $('#content').css('height', common_height);


    $('#main-nav ul li a')
        .click(function(event) {
            event.preventDefault();
            $('#main-nav ul li a').removeClass('main-nav-active')
            $(this)
            .removeClass('main-nav-hover')
            .addClass('main-nav-active');
            $('#tab-content').hide();
            $('#tab-menu li a').fadeOut('slow').fadeIn('slow');
            //$('#main-content').fadeOut('slow').fadeIn('slow');
            delay($('#tab-content'), 1500);
            $('#secondary-content').hide('slow');
        })
        .hover(
            function() {
                $(this).addClass('main-nav-hover');
            },
            function() {
                $(this).removeClass('main-nav-hover');
            }
        );
    $('#tab-menu li a')
        .click(function(event) {
            event.preventDefault();
            $('#tab-menu li a').removeClass('tab-menu-active');
            $(this).removeClass('tab-menu-hover');
            $(this).addClass('tab-menu-active');
            $('#tab-content').fadeOut('slow').fadeIn('slow');
        })
        .hover(
            function() {
                if(!$(this).hasClass('tab-menu-active')) {
                    $(this).addClass('tab-menu-hover');
                }
            },
            function() {
                $(this).removeClass('tab-menu-hover');
        });

});

function delay(obj, time) {
    window.setTimeout(function() {
        obj.fadeIn('slow');
    }, time);
}
</script>
<script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
        $(function () {
                var tabContainers = $('div.tabs > div');
                tabContainers.hide().filter(':first').show();

                $('div.tabs ul.tabNavigation a').click(function () {
                        tabContainers.hide();
                        tabContainers.filter(this.hash).show();
                        $('div.tabs ul.tabNavigation a').removeClass('selected');
                        $(this).addClass('selected');
                        return false;
                }).filter(':first').click();
        });
</script>
<title>Bestbuy</title>
</head>

<body>
<div id="container">
		<div id="header">
			<div id="top_hdr">
                <span >Welcom. Please </span><a href="#">create an acount </a>
                    <span > or </span> <a href="#">Login</a>
                <div id="cart">
                	<a href="#" style="background:url(images/shopping_cart.png); padding-left: 40px; background-repeat:no-repeat; margin-right: 10px;"><span style="display:inline-block;margin-top: 10px;">Cart</span></a>
                    <a id="item" href="#" style="height:30px;">
                    	<span id="soluong" style="display:inline-block;margin-top: 5px;">0</span>
                        <span style="display:inline-block;margin-top: 5px;">item</span>
                    </a>
                </div>
            </div>
        <div id="wrap_hdr">
          	<div id="logo">
                <a href="#"><img src="images/logo.jpg" /></a>
    		</div>
            <div id="div_search">
               	  <input id="tbx_search" type="text" value="nhấn vào đây để tìm kiếm .... "/>
                  <img id="btn_search" src="images/btn_search.png" style="padding-top: 5px;"/>
          	</div>

       	  </div>
            <div id="end_hdr">
                <div id="nav">
                	<ul>
                    	<li><a href="#">PRODUCT</a></li>
                        <li><a href="#">SERVICE</a></li>
                        <li><a href="#">SHOP & DEAL</a></li>
                        <li><a href="#">GIFTS</a></li>
                    </ul>
                </div>
            </div>
		</div>
        <div id="main">
            <div id="main_content">

				<div id="div_image">
					<a href="#"><img src="images/products/3411128_sb (1).jpg"/></a><br /><br />
					<a href="#" style="text-align: center;margin-right: 10px;"><img src="images/btn_viewmore.gif" /></a>
					<a href="#" style="text-align: center;"><img src="images/btn-demo.gif" /></a>
				</div>
				<div id="product_info">
					<h2>Asus - Laptop / Intel® Core™ i5 Processor / 15.6" Display / 6GB Memory - Aluminum Lake Blue Hairline</h2>
					<div id="detailband">
					 <span>Model : <strong>U56E-BBL6 | </strong> SKU : <strong>3411128</strong></span><br/>
					</div>
					<div id="customer-reviews">
						<div id="star_rating">
							<input name="star1" type="radio" class="star"/>
							<input name="star1" type="radio" class="star"/>
							<input name="star1" type="radio" class="star"/>
							<input name="star1" type="radio" class="star"/>
							<input name="star1" type="radio" class="star"/>
							<span style"display:block;"> 4.0 of 5 (<a href=#>Reviews</a>)</span>
						</div>
					</div>
				</div>
				<div id="add_to_cart">
                    <a href="#"><img src="images/fs1.gif" /><br/></a>
				    <span>Our Prince : <strong>$549.99<strong></span> <br/>
                    <a href="#"><img src="images/add_to_card.png" /><br/></a>
                    <a href="#"><img src="images/add-to-wish-list.png" style="padding-bottom: 10px;" /></a>

				</div>
				<div class="tabs">
                  <ul class="tabNavigation">
                      <li><a href="#first">First</a></li>
                      <li><a href="#second">Second</a></li>
                      <li><a href="#third">Third</a></li>
                  </ul>
                  <div id="first" class="noidung">
                      <h2>First</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  </div>
                  <div id="second" class="noidung">
                      <h2>Second</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  </div>
                  <div id="third" class="noidung">
                      <h2>Third</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  </div>
              </div>

			</div>
                 
		</div>
		<div id="footer">
        	<div id="contact">
            	<h5 style="font-weight:bold;">Need help? We're available 24/7 at 1-888-BEST BUY (1-888-237-8289)</h5>
                <p style="font-size: 13px;">Online prices and selection generally match our retail stores, but may vary. Prices and offers are subject to change. ©2003-2011 BBY Solutions, Inc. All rights reserved. Best Buy, the Best Buy logo, the tag design and BestBuy.com are trademarks of BBY Solutions, Inc. For personal, noncommercial use only.</p>
            </div>
            <div id="link">
            	<ul>
                	<li><a href="#"><img /></a></li>
                    <li><a href="#"><img /></a></li>
                    <li><a href="#"><img /></a></li>
                </ul>
            </div>
            <!--<div id="left_ftr"></div>
    		<div id="center_ftr"></div>
            <div id="right_ftr"></div>-->
		</div>
	</div>
</body>
</html>
